<!--
 * @Descripttion:
 * @version: 1.0
 * @Author: Teemor
 * @Date: 2024-03-15 10:40:28
-->
<template>
  <view class="overview">
    <view class="topBox bg">
      <view class="font-size-[30rpx] color-[#354970]">实时状态</view>
      <view class="flex flex-justify-between mt-3">
        <view class="flex grid-items-start">
          <uv-icon name="yunhang" custom-prefix="custom-icon" :size="20" :color="themeColor" />
          <view class="textColor ml-2">
            <view class="textColor2 pb-1">运行状态</view>
            运行中
          </view>
        </view>
        <view class="flex grid-items-start">
          <uv-icon
            name="yunhangmoshi1"
            custom-prefix="custom-icon"
            :size="20"
            :color="themeColor"
          />
          <view class="textColor ml-2">
            <view class="textColor2 pb-1">运行模式</view>
            自动并离网
          </view>
        </view>
        <view class="flex grid-items-start">
          <uv-icon name="gaojing" custom-prefix="custom-icon" :size="20" :color="themeColor" />
          <view class="textColor ml-2">
            <view class="textColor2 pb-1">告警状态 </view>
            正常
          </view>
        </view>
      </view>
    </view>

    <view class="mainBox">
      <view class="item">
        <view class="bg p-[30rpx]">
          <view class="top flex flex-justify-between">
            <view class="font-size-[30rpx] textColor">
              电网
              <view class="mt-1"><text :style="{ color: themeColor }"> 1089.2</text> Kw</view>
            </view>
            <view class="icon">
              <uv-icon
                name="dianwangLOGO"
                custom-prefix="custom-icon"
                :size="30"
                :color="themeColor"
              />
            </view>
          </view>
          <view class="mt-5 textColor2">今日上行 <text class="textColor">50</text> Kwh</view>
          <view class="mt-2 textColor2">今日下行 <text class="textColor">50</text> Kwh</view>
        </view>
      </view>
      <view class="item">
        <view class="bg p-[30rpx]">
          <view class="top flex flex-justify-between">
            <view class="font-size-[30rpx] textColor">
              储能
              <view class="mt-1"><text :style="{ color: themeColor }"> 1089.2</text> Kw</view>
            </view>
            <view class="icon">
              <uv-icon
                name="chunengxinxi"
                custom-prefix="custom-icon"
                :size="30"
                :color="themeColor"
              />
            </view>
          </view>
          <view class="mt-5 textColor2">今日上行 <text class="textColor">50</text> Kwh</view>
          <view class="mt-2 textColor2">今日下行 <text class="textColor">50</text> Kwh</view>
        </view>
      </view>
      <view class="item">
        <view class="bg p-[30rpx]">
          <view class="top flex flex-justify-between">
            <view class="font-size-[30rpx] textColor">
              发电
              <view class="mt-1"><text :style="{ color: themeColor }"> 1089.2</text> Kw</view>
            </view>
            <view class="icon">
              <uv-icon
                name="fadianzhan"
                custom-prefix="custom-icon"
                :size="30"
                :color="themeColor"
              />
            </view>
          </view>
          <view class="mt-5 textColor2">今日发电 <text class="textColor">50</text> Kwh</view>
        </view>
      </view>
      <view class="item">
        <view class="bg p-[30rpx]">
          <view class="top flex flex-justify-between">
            <view class="font-size-[30rpx] textColor">
              负荷
              <view class="mt-1"><text :style="{ color: themeColor }"> 1089.2</text> Kw</view>
            </view>
            <view class="icon">
              <uv-icon
                name="zuidafuhe"
                custom-prefix="custom-icon"
                :size="30"
                :color="themeColor"
              />
            </view>
          </view>
          <view class="mt-5 textColor2">今日用电 <text class="textColor">50</text> Kwh</view>
        </view>
      </view>
    </view>
    <view class="mt-7">
      <gc-chartLine />
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: Number,
    default: '',
  },
  themeColor: {
    type: String,
    default: '',
  },
})
const { title } = toRefs(props)
</script>

<style lang="scss" scoped>
.overview {
  .bg {
    background: linear-gradient(180deg, #f5f5f5, #fff);
    border: 1px solid #e3e3e3;
    border-radius: 20rpx;
  }

  .topBox {
    padding: 32rpx 34rpx;
  }

  .mainBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -12rpx;

    .item {
      box-sizing: border-box;
      width: 50%;
      padding: 0 12rpx;
    }

    .bg {
      box-sizing: border-box;
      height: 254rpx;
      margin: 24rpx 0 0;
    }

    .top {
      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        background: #fff;
        border-radius: 20rpx;
        box-shadow: 0rpx 5rpx 8rpx 0rpx rgb(241 240 240 / 61%);
      }
    }
  }
}
</style>
